<!doctype html> 
<html ng-app='text'> 
<head> 
    <meta charset="utf-8"> 
    <title></title>
    <style type="text/css">
div{width: 100px;height: 100px;background: #ccc;border: 1px solid black;display: none;}
input.active{
	background: yellow;
}
div.active{
	display: block;
}

    </style> 
    <script type="text/javascript" src='angular.js'></script>
    <script type="text/javascript">
   		var app = angular.module('text',[]);
   		app.controller('const1',function ($scope,$interval){
   			$scope.now = 0;
   			$scope.arr = [
   				{'inputValue':'a','divInner':'呵呵'},
   				{'inputValue':'b','divInner':'哈哈'},
   				{'inputValue':'c','divInner':'呼呼'}
   				,
   				{'inputValue':'d','divInner':'哼哼'}
   			];

   			/*
   			$interval(function (){
   				console.log($scope.now)
   			},300);
   			*/
   			var t = null;
   			t = $interval(function (){
   				if($scope.now == $scope.arr.length-1)$scope.now = -1;
   				$scope.now++;
   			},1000);


   			$scope.setIndex = function (n){
   				$scope.now = n;
   			};

   			$scope.cansl = function (){
   				$interval.cancel(t);
   			}
   			$scope.start = function (){
   				$interval.cancel(t);
   				t = $interval(function (){
					if($scope.now == $scope.arr.length-1)$scope.now = -1;
					$scope.now++;
				},1000);
   			}

   		});

    </script>
</head>
<body ng-controller='const1' ng-mouseover='cansl()' ng-mouseout='start()'>
<input type='button' ng-repeat='v in arr' value={{v.inputValue}} ng-click='setIndex($index)' class={{$index==now?"active":""}}>
<div ng-repeat='v in arr' class={{$index==now?"active":""}}>{{v.divInner}}</div>
</body>
</html>